<template>
  <div style="padding-bottom: 30px">
    <div style="margin: 20px 0;padding-left: 60px">
      <el-link type="primary" class="del_allHistory" @click="delAllHistory">删除所有记录</el-link>
    </div>
    <el-empty description="您当前浏览记录为空哦~" v-if="historyList.length < 1">
    </el-empty>
    <el-row type="flex"  justify="center" v-for="h in historyList" style=";margin-bottom: 30px">
      <el-col :span="20" style="height: 40px;line-height: 40px;box-sizing: border-box" >
        <div style="height: 60px;">
          您在&nbsp;<span style="color: #f1da7f">{{h.createTime}}</span>&nbsp;浏览了&nbsp;
          <el-link type="success" style="font-size: 16px;margin-top: -1px" @click="showDetail(h.articleId,h.authorId)">{{h.title}}</el-link>
          <span class="history_delete" style="color: red;float: right" @click="delHistory(h.id)">删除</span>
        </div>
      </el-col>
    </el-row>
    <div class="block" style="margin-left: 35%;margin-bottom:30px">
      <el-pagination
          background
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "ViewHistory",
  data(){
    return {
      userId:JSON.parse(sessionStorage.getItem('userInfo')).id,
      historyList:'',
      currentPage:1,
      total:10,
      pageSize:10,
    }
  },
  methods:{
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getViewHistory()
    },
    delAllHistory(){
      let url = 'user/delHistoryByUserId/'+this.userId;
      this.$axios.delete(url).then(res=>{
        if(res.data.code == 200){
          this.$message.success('清除浏览记录成功')
          this.getViewHistory()
        }
      })
    },
    delHistory(id){
      let url = 'user/delHistory/'+id;
      this.$axios.delete(url).then(res=>{
        if(res.data.code == 200){
          this.$message.success('清除浏览记录成功')
          this.getViewHistory()
        }
      })
    },
    getViewHistory(){
      let url = 'user/getViewHistory'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
          size:this.pageSize,
          userId:this.userId
        }
      }).then(res=>{
        if(res.data.code == 200){
          this.historyList = res.data.data.list;
          this.currentPage = res.data.data.pageNum;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
          console.log(this.historyList)
        }
      })
    },
    showDetail(id,authorId){
      //将文章id传到文章展示页面
      this.$router.push({
        path:'/articleDetail',
        query: {
          articleId: id,
          authorId: authorId
        }
      });
    },
  },
  created(){
    this.getViewHistory();
  }

}
</script>

<style scoped>
.history_delete:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>